<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./JavaScript/jquery-3.7.1.js"></script>
  </head>
  <body>
    <button id="btn01">1</button>

    <ul>
      <li id="G">GG</li>
      <li id="F">FF</li>
      <li>TT</li>
      <li>YY</li>
      <li>UU</li>
    </ul>
    <script>
      /* 
        jQuery对象
            - 通过jQuery核心函数获取到的对象就是jQuery对象
            - jQuery对象是jQuery中定义的独享
                可以将其理解为DOM对象的升级版,在jQuery对象中我们提供方法
                    来帮我们简化DOM的操作
            - jquery对象本质上是一个DOM对象的数组(类数组)
                我们通过索引过去jquery对象中的DOM对象(索取索引后,变成DOM对象,可以使用DOM的方法)
            - 当我们修改jquery对象时,它会自动修改jQuery中所有的元素
                这一特点我们称之为jQuery的隐式迭代
            - 通常情况下,jQuery对象方法的返回值依然是一个jQuery对象
                所以我们可以在调用一个方法后继续调用其他的jQuery对象的方法
                这一特性,称之为jQuery对象的链式嗲用

        
        */
      $('#btn01').click(function () {
        var $li = $('li');
        console.log($li[0]);
        // 获取所有的li

        // $li.text("GGGGGG")
        // 读取文本
        var text = $li.text();
        alert(text);
        console.log(text);
        var id = $li.attr('id'); //方法读取li中有id的第一个标签的元素
        console.log(id);
        var result = $li.text('GGGGGGGG');
        alert(result === $li);
        $li.text('DSDSD').css('color', 'red');
      });
    </script>
  </body>
</html>
